<template>
    <div @click="datas.user_card = !datas.user_card" style="cursor:pointer;">{{datas.name}}</div>
    <div class="user-card-div" v-if="datas.user_card">
        <!-- <div>其他内容</div> -->
        <div @click="outlog"><el-icon><SwitchButton /></el-icon> <div>退出系统</div></div>
        
    </div>


</template>
<script setup>
import {
  SwitchButton,
} from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

const route = useRouter();
const datas = reactive({
  name: localStorage.getItem("name", ""),
  user_card:false
});

//情况登录信息
const outlog = () => {
  localStorage.clear();
  route.push("/login");
};


</script>
<style scoped>
.user-card-div{
    position:absolute;
    right: 0;
    font-size: 12pt;
    background-color:rgba(226, 226, 226, 0.384);
    width: 120px;
    margin-top: 0.5rem;
    border-radius: 5px;
}
.user-card-div > div{
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: 5px;
}
.user-card-div > div:hover{
    background-color:rgba(175, 174, 174, 0.384);
    cursor:pointer;
}


</style>
